<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/head::head('全局配置')"></head>
<link href="http://cdn.viptool.cn/lib/awesome-bootstrap-checkbox/0.3.5/awesome-bootstrap-checkbox.min.css"
      rel="stylesheet">
<link href="http://cdn.viptool.cn/lib/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
      rel="stylesheet">

<body class="gray-bg">
<style>
    .form-control {
        display: inline-block;
        margin-right: 5px;
    }

    .form-control.OnlyFloat,
    .form-control.OnlyNum {
        width: 100px;
    }

    .form-control.datetime {
        width: 160px;
    }

    .separator {
        margin: 31px 20px 10px 20px;
        border-bottom: 1px solid #ccc;
    }

    .trade_blacklist .rows {
        padding-left: 0px;
        padding-bottom: 10px;
    }

    .trade_blacklist .rows .label-title {
        display: inline-block;
        width: 61px;
        text-align: right;
    }

    .add-blacklist {
        display: inline-block;
        width: 100px;
        text-align: center;
    }
</style>
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a class="tab1" data-toggle="tab" href="#tab-1"
                                          aria-expanded="true">全局基本配置</a>
                    </li>
                    <li class=""><a class="tab2" data-toggle="tab" href="#tab-2" aria-expanded="false">恒生接口配置</a>
                    </li>
                    <li class=""><a class="tab3" data-toggle="tab" href="#tab-3" aria-expanded="false">阿里云短信配置</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <!--基本配置-->
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <form class="form-horizontal" id="basicsConfig">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">网站标题</label>
                                    <div class="col-sm-2">
                                        <input type="text" value="" id="websiteTitle" name="websiteTitle"
                                               maxlength="30" class="form-control"
                                               th:value="${config.basicsConfig.websiteTitle}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">平台交易手续费(‰)</label>
                                    <div class="col-sm-2">
                                        <input type="text" value="" id="handlingFee" name="handlingFee"
                                               maxlength="30" class="form-control OnlyFloat"
                                               th:value="${config.basicsConfig.handlingFee}">‰
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">撮合服务费(‰)</label>
                                    <div class="col-sm-2">
                                        <input type="text" value="" id="wholesaleHandlingFee" name="wholesaleHandlingFee"
                                               maxlength="30" class="form-control OnlyFloat"
                                               th:value="${config.basicsConfig.wholesaleHandlingFee}">‰
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">每天限购数量</label>
                                    <div class="col-sm-2">
                                        <input type="text" value="" id="toDayLimitBuyCount"
                                               name="toDayLimitBuyCount" maxlength="30" class="form-control OnlyNum"
                                               th:value="${config.basicsConfig.toDayLimitBuyCount}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">拼团奖励划拨积分比例(%)</label>
                                    <div class="col-sm-2">
                                        <input type="text" value="" id="pinTeamIntegralRate"
                                               name="pinTeamIntegralRate" maxlength="30" class="form-control OnlyFloat"
                                               th:value="${config.basicsConfig.pinTeamIntegralRate}">%
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">拼点奖励划拨积分比例(%)</label>
                                    <div class="col-sm-2">
                                        <input type="text" value="" id="pinDotIntegralRate"
                                               name="pinDotIntegralRate" maxlength="30" class="form-control OnlyFloat"
                                               th:value="${config.basicsConfig.pinDotIntegralRate}">%
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">挂卖周期</label>
                                    <div class="col-sm-2">
                                        <input type="text" value="" id="salePeriod"
                                               name="settlePeriod" maxlength="30" class="form-control OnlyNum"
                                               th:value="${config.basicsConfig.salePeriod}">天
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">挂卖前交易校验</label>
                                    <div class="col-sm-2" style="margin-top: 6px;">
                                        开启
                                        <input name="enableTradeRule" id="enableTradeRule"
                                               type="checkbox" class="js-switch"
                                               th:checked="${config.basicsConfig.enableTradeRule}"
                                               checked/>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">T+1交易规则</label>
                                    <div class="col-sm-2" style="margin-top: 6px;">
                                        开启
                                        <input name="enableSalePeriodOne" id="enableSalePeriodOne"
                                               type="checkbox" class="js-switch"
                                               th:checked="${config.basicsConfig.enableSalePeriodOne}"
                                               checked/>
                                    </div>
                                </div>

                                <!-- 分隔符 -->
                                <div class="separator">
                                    <label>交易时间配置(系统默认设置自然周开盘交易，开盘日交易时间为上午：9：00-11：30；下午13：00-15：30)</label>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">交易日</label>
                                    <div class="col-sm-6">
                                        <input type="hidden" id="tradeWeek"
                                               th:value="${config.basicsConfig.tradeWeek}"/>
                                        <div th:each="day:${dayOfWeeks}"
                                             class="checkbox checkbox-default m-b-none m-t-none"
                                             style="display: inline-block;">
                                            <input style="margin-top: 0px; cursor: pointer;" type="checkbox"
                                                   th:value="${day.code}" name="chkWeeks" value="560946"/><label><span
                                                th:text="${day.desc}">1</span></label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group form-inline">
                                    <label class="col-sm-2 control-label">上午交易时间段(AM)</label>
                                    <div class="col-sm-6">
                                        <div class='input-group date'>
                                            <input th:value="${config.basicsConfig.tradeStartTime}" type='text'
                                                   id="tradeStartTime" name="tradeStartTime"
                                                   class="form-control input-sm input-s trade-time"
                                                   placeholder="开始时间"/>
                                            <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                        </div>
                                        -
                                        <div class='input-group date'>
                                            <input th:value="${config.basicsConfig.tradeEndTime}" type='text'
                                                   id="tradeEndTime" name="tradeEndTime"
                                                   class="form-control input-sm input-s trade-time"
                                                   placeholder="结束时间"/>
                                            <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group form-inline">
                                    <label class="col-sm-2 control-label">下午交易时间段(PM)</label>
                                    <div class="col-sm-6">
                                        <div class='input-group date form_date'>
                                            <input th:value="${config.basicsConfig.pmTradeStartTime}" type='text'
                                                   id="pmTradeStartTime" name="pmTradeStartTime"
                                                   class="form-control input-sm input-s trade-time"
                                                   placeholder="开始时间"/>
                                            <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                        </div>
                                        -
                                        <div class='input-group date'>
                                            <input th:value="${config.basicsConfig.pmTradeEndTime}" type='text'
                                                   id="pmTradeEndTime" name="pmTradeEndTime"
                                                   class="form-control input-sm input-s trade-time"
                                                   placeholder="结束时间"/>
                                            <span class="input-group-addon">
                                                    <span class="glyphicon glyphicon-calendar"></span>
                                                </span>
                                        </div>
                                    </div>
                                </div>
                                <!-- 分隔符 -->
                                <div class="separator">
                                    <label>交易黑名单(以下时间段内禁止交易)</label>
                                    <a class="add-blacklist">添加黑名单</a>
                                </div>
                                <div class="form-group trade_blacklist">
                                    <label class="col-sm-1 control-label"></label>
                                    <div class="col-sm-6 trade_blacklist_config">
                                    </div>
                                </div>

                                <!-- 黑名单列表配置模板 -->
                                <script id="blacklist_template" type="text/html">
                                    <div class="rows col-sm-12 row_{sort}">
                                        <span class="label-title">开始时间</span>
                                        <input type="text" id="blStartTime_{sort}" value="{blStartTime}" maxlength="10"
                                               class="form-control datetime">
                                        结束时间
                                        <input type="text" id="blListTime_{sort}" value="{blListTime}" maxlength="10"
                                               class="form-control datetime">

                                        <a id="id_{sort}" data-id="{sort}" class="remove-blacklist">删除</a>
                                    </div>
                                </script>

                            </form>
                        </div>
                    </div>

                    <!--恒生接口配置-->
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <form class="form-horizontal" id="hsApiConfig">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">接口地址</label>
                                    <div class="col-sm-6">
                                        <input type="text" value="" id="hsApiUrl" name="hsApiUrl"
                                               class="form-control" th:value="${config.hsApiConfig.hsApiUrl}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">APPKEY</label>
                                    <div class="col-sm-6">
                                        <input type="text" value="" id="hsApiAppKey" name="hsApiAppKey"
                                               class="form-control"
                                               th:value="${config.hsApiConfig.hsApiAppKey}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">DES加密密钥</label>
                                    <div class="col-sm-6">
                                        <input type="text" value="" id="hsAPiDesKey" name="hsAPiDesKey"
                                               class="form-control"
                                               th:value="${config.hsApiConfig.hsAPiDesKey}">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!--阿里云短信接口配置-->
                    <div id="tab-3" class="tab-pane">
                        <div class="panel-body">
                            <form class="form-horizontal" id="smsConfig">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">APPKEY</label>
                                    <div class="col-sm-6">
                                        <input type="text" value="" id="smsApiKey" name="smsApiKey"
                                               class="form-control" th:value="${config.smsConfig.smsApiKey}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">APPSECRET</label>
                                    <div class="col-sm-6">
                                        <input type="text" value="" id="smsApiSecret" name="smsApiSecret"
                                               class="form-control"
                                               th:value="${config.smsConfig.smsApiSecret}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">接口地址</label>
                                    <div class="col-sm-6">
                                        <input type="text" value="" id="smsServiceUrl" name="smsServiceUrl"
                                               maxlength="30" class="form-control"
                                               th:value="${config.smsConfig.smsServiceUrl}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">短信签名</label>
                                    <div class="col-sm-6">
                                        <input type="text" value="" id="smsSignName" name="smsSignName"
                                               class="form-control"
                                               th:value="${config.smsConfig.smsSignName}">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="form-group" style="margin-top: 10px;">
                        <div class="col-sm-8 col-sm-offset-5">
                            <button class="btn btn-success btn-submit" type="button"
                                    onclick="jsHelper.btnSubmit()">提交
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<footer th:include="common/footer::js"/>
<script
        src="http://cdn.viptool.cn/lib/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    var cdnUrl = '[[${cdnUrl}]]';
    var blacklistDateTimeConfigs = '[[${blacklistDateTimeConfigs}]]';
    if (blacklistDateTimeConfigs.length > 0) {
        blacklistDateTimeConfigs = blacklistDateTimeConfigs.replace(/&quot;/gm, '"');
    }
    var jsHelper = {
        init: function () {
            let weeks = $("#tradeWeek").val();
            if (weeks.length !== 0) {
                let weeksArray = weeks.split('|');
                $.each(weeksArray, function (o, item) {
                    $("input[name=chkWeeks][value=" + item + "]").prop("checked", "checked");
                });
            }
        },
        btnSubmit: function () {
            var self = this;
            var basicsConfig = $("#basicsConfig").parseForm();
            var hsApiConfig = $("#hsApiConfig").parseForm();
            var smsConfig = $("#smsConfig").parseForm();
            let weeks = "";
            $("input[name=chkWeeks]:checked").each(function () {
                weeks += $(this).val() + "|";
            });
            weeks = weeks.substring(0, weeks.length - 1);
            basicsConfig.tradeWeek = weeks;
            var blackListConfig = self.getBlacklist();
            basicsConfig.extraCloseTradeDate = JSON.stringify(blackListConfig);
            // var param = { ...basicsConfig, ...hsApiConfig, ...smsConfig }
            var param = {};
            $.extend(param, basicsConfig, hsApiConfig, smsConfig);
            hotUtil.loading.show();
            hotUtil.ajaxCall("/config/ajax/save", param, function (ret) {
                hotUtil.loading.close();
                if (ret.resultCode === 2000) {
                    swal("提交成功", "", "success");
                }
                else {
                    swal(ret.resultMsg, "错误提示", "error");
                }
            })
        },
        upload: function () {
            hotUtil.loading.show();
            hotUtil.uploadImg2($("#files")[0].files, "wxshare", function (data) {
                hotUtil.loading.close();
                $("#shareLogo").val(data.path);
                $(".imgpreview").attr("src", data.url);
            });
        },
        /**
         * 初始化数据
         */
        initBlackList: function (data) {
            var self = this;
            var template = $("#blacklist_template").html();
            var html = "";
            var len = $(".trade_blacklist_config").children(".col-sm-12").length;
            if (typeof data != "undefined" && data != null && data.length > 0) {
                len = data.length;
                $.each(data, function (i, item) {
                    var tempHtml = template;
                    tempHtml = tempHtml.replace(/{sort}/gm, i + 1);
                    tempHtml = tempHtml.replace(/{blStartTime}/gm, item.blStartTime);
                    tempHtml = tempHtml.replace(/{blListTime}/gm, item.blListTime);
                    html += tempHtml;
                });
            }
            else {
                len++;
                var tempHtml = template;
                tempHtml = tempHtml.replace(/{sort}/gm, len);
                tempHtml = tempHtml.replace(/{blStartTime}/gm, "");
                tempHtml = tempHtml.replace(/{blListTime}/gm, "");
                html += tempHtml;
            }
            $(".trade_blacklist_config").append(html);
            $(".datetime").datetimepicker({
                format: 'YYYY-MM-DD HH:mm:ss'
            });
            self.removeBlacklistRow();
        },
        removeBlacklistRow: function () {
            var self = this;
            // 移除行元素
            $(".remove-blacklist")
                .off("click")
                .on("click", function () {
                    var removeId = $(this).attr("data-id");
                    $(".row_" + removeId).remove();
                });
        },
        // 获取黑名单数据
        getBlacklist: function () {
            var extraCloseTradeDate = [];
            var len = $(".trade_blacklist_config").children(".col-sm-12").length;
            for (var i = 1; i <= len; i++) {
                var config = {};
                if (!hotUtil.isNullOrEmpty($("#blStartTime_" + i).val())) {
                    config.blStartTime = $("#blStartTime_" + i).val();
                }
                if (!hotUtil.isNullOrEmpty($("#blListTime_" + i).val())) {
                    config.blListTime = $("#blListTime_" + i).val();
                }
                if (config.length > 0) {
                    extraCloseTradeDate.push(config);
                }
            }
            return extraCloseTradeDate;
        }
    };
    $(function () {
        $(".OnlyFloat").OnlyFloat();
        $(".OnlyNum").OnlyNum();

        $(".trade-time").datetimepicker({
            format: 'HH:mm:ss'
        });
        jsHelper.init();

        // 添加黑名单
        $(".add-blacklist").on("click", function () {
            jsHelper.initBlackList(null);
        });
        if (blacklistDateTimeConfigs.length > 0) {
            var data = JSON.parse(blacklistDateTimeConfigs);
            jsHelper.initBlackList(data);
        }
    });

</script>
</body>

</html>